<template>
  <div class="app-container bg-gray">
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="22" :xl="16">
        <el-card v-for="(item, index) in versions" :key="index" class="box-1">
          <div slot="header" class="header">
            <span>{{ item.version }}</span>
            <div>{{ new Date(parseInt(item.create_time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ') }}</div>
          </div>
          <el-tag type="primary">{{ item.tips }}</el-tag>
          <div class="content" v-html="item.introduce">{{ item.introduce }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      versions: []
    }
  },
  watch: {
  },
  created() {
    this.getData();
  },
  methods: {
    getData(order) {
      this.tableLoading = true;
      order || (order = {});
      const url = 'sysupdate/list';
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.versions = res.data;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      });
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../styles/index.scss';

.box-1 {
  margin-left: 50px;
  margin-bottom: 50px;
  position: relative;
  overflow: visible;
  .header {
    @include flex-row(center, space-between);
    span {
      font-size: 19px;
      font-weight: 600;
    }
    div {
      @extend .text-right;
      color: $textGray;
    }
  }
  .header::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: linear-gradient(to top, #e8e8e8, #e8e8e8) no-repeat,
      linear-gradient(to right, #e8e8e8, #e8e8e8) no-repeat,
      linear-gradient(135deg, #fff, #fff 18px, hsla(0, 0%, 100%, 0) 18px)
        no-repeat;
    background-size: 18px 1.5px, 1.5px 18px, 18px 18px;
    transform: rotate(-45deg);
    left: -9.5px;
    top: 23px;
  }
  .content {
    > ul {
      margin: 0;
      > li {
        > span {
          line-height: 50px;
          font-size: 18px;
        }
        ul > li {
          padding: 6px 0;
        }
      }
    }
  }
}
.el-col::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 1px;
  background: linear-gradient(to top, $gray, $panGreen) no-repeat;
  left: 20px;
  top: 0;
}
</style>
